<template>
  <vueWaterfallEasy :imgsArr="list" :maxCols="6" @scrollReachBottom="getData" ref="waterfall"></vueWaterfallEasy>
</template>

<script>
import vueWaterfallEasy from 'vue-waterfall-easy'
export default {
  name: 'falls',
  components: { vueWaterfallEasy },
  data () {
    return {
      list: [
        {
          'src': require('./imgArr/1.jpg')
        },
        {
          'src': require('./imgArr/2.jpg')
        },
        {
          'src': require('./imgArr/3.jpg')
        },
        {
          'src': require('./imgArr/4.jpg')
        },
        {
          'src': require('./imgArr/5.jpg')
        },
        {
          'src': require('./imgArr/6.jpg')
        },
        {
          'src': require('./imgArr/1.jpg')
        },
        {
          'src': require('./imgArr/2.jpg')
        },
        {
          'src': require('./imgArr/3.jpg')
        },
        {
          'src': require('./imgArr/4.jpg')
        },
        {
          'src': require('./imgArr/5.jpg')
        },
        {
          'src': require('./imgArr/6.jpg')
        },
        {
          'src': require('./imgArr/6.jpg')
        },
        {
          'src': require('./imgArr/1.jpg')
        },
        {
          'src': require('./imgArr/2.jpg')
        },
        {
          'src': require('./imgArr/3.jpg')
        },
        {
          'src': require('./imgArr/4.jpg')
        },
        {
          'src': require('./imgArr/5.jpg')
        },
        {
          'src': require('./imgArr/6.jpg')
        }
      ],
      number: 0 // 加载次数
    }
  },
  methods: {
    getData () {
      if (this.number >= 5) {
        this.$refs.waterfall.waterfallOver()
        return false
      }
      this.list = [ ...this.list, ...this.list.slice(0, 4) ]
      this.number += 1
    }
  }
}
</script>

<style scoped>

</style>
